<template>
    <div id="login-box">
        <!-- 上半红色遮罩 -->
        <p class="login-title">哟，
            <br>你回来啦 。
        </p>
        <div class="opt-box">
            <mu-text-field
                v-model="username"
                label="账号"
                @keyup.enter="login"
                full-width
                label-float
            ></mu-text-field>
            <mu-text-field
                v-model.number="password"
                label="密码"
                type="password"
                @keyup.enter="login"
                full-width
                label-float
            ></mu-text-field>
        </div>
        <div class="btn-box">
            <div
                class="send"
                @click="login"
                v-loading="loading"
                data-mu-loading-size="32"
                data-mu-loading-class="loading"
            >
                <mu-icon
                    size="40"
                    value="check"
                    color="#e34a42"
                    v-show="!loading"
                ></mu-icon>
            </div>
        </div>
        <no-data></no-data>
    </div>
</template>
<script>
import noData from "@/components/no-data"

export default {
    components: {
        noData
    },
    data () {
        return {
            username: "haroro",
            password: 123456,
            loading: false
        };
    },
    methods: {
        dosomething () {
            this.$set(this.list, 0, 999)
            // this.list[ 0 ].a = 999
            // this.list.length = 0
        },
        login () {
            if (!this.username) {
                this.$toast.warning('没账号怎么登陆？');
                return;
            }
            if (!this.password) {
                this.$toast.warning('没密码怎么登陆？');
                return;
            }
            this.loading = true;
            this.$store.dispatch("Login", {
                username: this.username,
                password: this.password
            }).then(ret => {
                console.log(ret);
                if (200 == ret.state) {
                    this.$toast.success('欢迎回来。');
                    setTimeout(() => {
                        this.$router.push({
                            name: 'timeCaps'
                        });
                    }, 300);
                } else if (101 == ret.state) {
                    this.$toast.warning(ret.msg);
                    this.loading = false;
                }
            }).catch(err => {
                this.$toast.error('网络错误，刷新重试。');
                setTimeout(() => {
                    this.loading = false;
                }, 300);
            });
        }
    },
    created () {},
};
</script>
<style lang="less" scoped>
#login-box {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  position: relative;
  background-image: url('~@/assets/img/login-back.png');
  background-size: 100% 100%;
  background-color: #142547;
  color: #fff;
  user-select: none;

  .login-title {
    font-size: 68px; /*px*/
    line-height: 1.3;
    margin-left: 40px;
    margin-top: 250px;
  }

  .opt-box {
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 150px;

    .register-box,
    .login-box {
      display: flex;
      align-items: center;
      margin-bottom: 60px;

      > .left {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 80px;
        padding-left: 20px;
        padding-right: 20px;
        border: 1px solid #fff;
        border-radius: 50%;

        img {
          width: 100%;
        }
      }

      > .info {
        width: 530px;
        margin-left: 20px;

        .title {
          font-size: 30px; /*px*/
          margin-bottom: 8px;
        }

        .text {
          font-size: 48px; /*px*/
        }
      }

      > .right {
        width: 40px;
      }
    }
  }
  .btn-box {
    text-align: center;
    .send {
      overflow: hidden;
      position: relative;
      border-radius: 50%;
      width: 50px; /*no*/
      height: 50px; /*no*/
      margin: 80px auto 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
<style lang="less">
#login-box {
  .loading .mu-circle {
    border-width: 3px !important; /*no*/
  }
  .opt-box {
    //定制样式
    .mu-input.has-label {
      margin-bottom: 10px;
      > .mu-input-label.float {
        color: #fff;
      }
      > .mu-input-label {
        color: #fff;
      }
      .mu-text-field.mu-input-content {
        .mu-text-field-input {
          color: #fff;
        }
        .mu-input-focus-line {
          bottom: -10px; /*no*/
        }
        .mu-input-line {
          background: #fff;
          height: 2px; /*no*/
          bottom: -10px; /*no*/
        }
      }
    }

    .mu-input__focus {
      .mu-text-field.mu-input-content {
        .mu-input-focus-line.focus {
          background: #e34a42;
          height: 2px; /*no*/
          bottom: -10px; /*no*/
        }
      }
    }
  }
}
</style>
